<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0 ;
				padding: 0;
				list-style: none;
			}
			
			li{
				display: inline-block;
				font-size: 48px;
				color: deeppink;
				font-weight: bold;
				margin: 10px 0;
				letter-spacing: 40px;
				animation: fun .5s infinite alternate cubic-bezier(.1,.85,.2,1);
			}
			@keyframes fun{
				from {transform: translateY(0) scale(1); color:deeppink ;}
				to{transform: translateY(-1em) scale(3);color:white;text-shadow:10px 10px 3px 1px yellow;}
			}
			
			ul{
				position: absolute;
				top:50%;
				left: 50%;
				transform: translate(-50%,-50%);
				/* 居中 */
			}
			body{
				background-color: #000000;
			}
			li:nth-child(2){
				animation-delay: 50ms;
			}
			li:nth-child(3){
				animation-delay: 100ms;
			}
			li:nth-child(4){
				animation-delay: 150ms;
			}
			li:nth-child(5){
				animation-delay: 200ms;
			}
			li:nth-child(6){
				animation-delay: 250ms;
			}
			li:nth-child(7){
				animation-delay: 300ms;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>L</li>
			<li>O</li>
			<li>A</li>
			<li>D</li>
			<li>I</li>
			<li>N</li>
			<li>G</li>
		</ul>
	</body>
</html>
